<template>
  <div class="statistics-content statistics-4">
    <div class="top-statistics-block">
      <div class="count-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="count-item">
          <div class="count">{{ count.community }}</div>
          <div class="text">社区数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.grid }}</div>
          <div class="text">网格数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.area }}</div>
          <div class="text">片区数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.village }}</div>
          <div class="text">小区数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.grid_user }}</div>
          <div class="text">网格长数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.have_job }}</div>
          <div class="text">已就业人数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.no_job }}</div>
          <div class="text">未就业人数</div>
        </div>
        <div class="count-item">
          <div class="count">{{ count.zero_employment_house }}</div>
          <div class="text">零就业家庭</div>
        </div>
      </div>
    </div>
    <div class="statistics-block">
      <div class="chart-block">
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="categoryChart" class="chart"></div>
        </div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="regHouse" class="chart"></div>
        </div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="regMember" class="chart"></div>
        </div>
      </div>
      <div class="map-block">
        <div class="map-content"></div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="jobIndustryA" class="chart"></div>
        </div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="jobIndustryB" class="chart"></div>
        </div>
      </div>
      <div class="chart-block">
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="companyIndustryA" class="chart"></div>
        </div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="companyIndustryB" class="chart"></div>
        </div>
        <div class="chart-content">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="job" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCategoryChart,
  getRegHouseChart,
  getTopCount,
  getRegMemberChart,
  getJobChart,
  getJobIndustryA,
  getJobIndustryB,
  getCompanyIndustryA,
  getCompanyIndustryB
} from '@/api/statistics4'

export default {
  name: "Statistics4",
  data(){
    return{
      count:{
        community:0,
        grid:0,
        area:0,
        village:0,
        grid_user:0,
        have_job:0,
        no_job:0,
        zero_employment_house:0,
      }
    }
  },
  mounted() {
    this.getCount()
    this.initCategoryChart();
    this.initRegGridChart();
    this.initRegGridMemberChart();
    this.initJobChart();
    this.initJobChartIndustryA();
    this.initJobChartIndustryB();
    this.initCompanyIndustryA();
    this.initCompanyIndustryB();
  },
  methods: {
    getCount() {
      getTopCount().then((res) => {
        if (res.status === 1) {
          this.count = res.result;
        }
      })
    },
    initCategoryChart() {
      let myCharts = this.$echarts.init(document.getElementById('categoryChart'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '未就业人员类别分布',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '10%',
          right: '0',
          bottom: '15%',
        },
        color: ['#67e6d4'],
        xAxis: {
          data: [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: [],//y轴数据
          barWidth:20
        },]
      }
      getCategoryChart().then((res)=>{
        if(res.status===1){
          const data=res.result
          option.series[0].data=data.yData;
          option.xAxis.data=data.xData;
          myCharts.hideLoading()
          myCharts.setOption(option);
        }
      })
    },
    initRegGridChart(){
      let myCharts = this.$echarts.init(document.getElementById('regHouse'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '登记情况-户',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        color:['#fdd22c', '#898ced','#fe8e86','#26c6ff','#fda864','#4addc6','#f39a50','#f833a1','#7289f4','#4cc3ff','#67e6d4'],
        legend: {
          top: '0',
          right:0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
          orient:'vertical'
        },
        series: [
          {
            name: '登记情况-户',
            type: 'pie',
            radius: ['0%','50%'],
            center: ['50%', '60%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  show:true,
                  formatter:'{b} : {c} ({d}%)',
                  color:'#fff'
                },
                labelLine:{show:true}
              }
            },
            data: [],
          }
        ]
      }
      getRegHouseChart().then((res)=>{
        if(res.status===1){
          option.series[0].data=res.result;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initRegGridMemberChart(){
      let myCharts = this.$echarts.init(document.getElementById('regMember'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '登记情况-人',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        color:['#fe8e86','#26c6ff','#fda864','#4addc6','#f39a50','#f833a1','#7289f4','#4cc3ff','#67e6d4'],
        legend: {
          top: '0',
          right:0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
          orient:'vertical'
        },
        series: [
          {
            name: '登记情况-人',
            type: 'pie',
            radius: ['0%','50%'],
            center: ['50%', '60%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  show:true,
                  formatter:'{b} : {c} ({d}%)',
                  color:'#fff'
                },
                labelLine:{show:true}
              }
            },
            data: [],
          }
        ]
      }
      getRegMemberChart().then((res)=>{
        if(res.status===1){
          option.series[0].data=res.result;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initJobChart(){
      let myCharts = this.$echarts.init(document.getElementById('job'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '就业情况',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        color:['#fda864','#4addc6','#f39a50','#f833a1','#7289f4','#4cc3ff','#67e6d4'],
        legend: {
          top: '0',
          left:0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
          orient:'vertical'
        },
        series: [
          {
            name: '就业情况',
            type: 'pie',
            radius: ['0%','50%'],
            center: ['50%', '60%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  show:true,
                  formatter:'{b} : {c} ({d}%)',
                  color:'#fff'
                },
                labelLine:{show:true}
              }
            },
            data: [],
          }
        ]
      }
      getJobChart().then((res)=>{
        if(res.status===1){
          option.series[0].data=res.result;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initJobChartIndustryA(){
      let myCharts = this.$echarts.init(document.getElementById('jobIndustryA'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '就业行业分布-1',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '10%',
          right: '0',
          bottom: '30%',
        },
        color: ['#4cc3ff'],
        xAxis: {
          data: [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: [],//y轴数据
          barWidth:20
        },]
      }
      getJobIndustryA().then((res)=>{
        if(res.status===1){
          const data=res.result
          option.series[0].data=data.yData;
          option.xAxis.data=data.xData;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initJobChartIndustryB(){
      let myCharts = this.$echarts.init(document.getElementById('jobIndustryB'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '就业行业分布-2',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '10%',
          right: '0',
          bottom: '30%',
        },
        color: ['#4cc3ff'],
        xAxis: {
          data: [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: [],//y轴数据
          barWidth:20
        },]
      }
      getJobIndustryB().then((res)=>{
        if(res.status===1){
          const data=res.result
          option.series[0].data=data.yData;
          option.xAxis.data=data.xData;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initCompanyIndustryA(){
      let myCharts = this.$echarts.init(document.getElementById('companyIndustryA'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '企业行业分布-1',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '10%',
          right: '0',
          bottom: '30%',
        },
        color: ['#4cc3ff'],
        xAxis: {
          data: [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '企业数',
          type: 'bar',
          data: [],//y轴数据
          barWidth:20
        },]
      }
      getCompanyIndustryA().then((res)=>{
        if(res.status===1){
          const data=res.result
          option.series[0].data=data.yData;
          option.xAxis.data=data.xData;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
    initCompanyIndustryB(){
      let myCharts = this.$echarts.init(document.getElementById('companyIndustryB'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '企业行业分布-2',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '10%',
          right: '0',
          bottom: '30%',
        },
        color: ['#4cc3ff'],
        xAxis: {
          data: [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '企业数',
          type: 'bar',
          data: [],//y轴数据
          barWidth:20
        },]
      }
      getCompanyIndustryB().then((res)=>{
        if(res.status===1){
          const data=res.result
          option.series[0].data=data.yData;
          option.xAxis.data=data.xData;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$background:rgba(255,255,255,0.09);
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
}

.corner.upper-left {
  background: url("/static/upper-left.png") no-repeat center;
  background-size: 100%;
  left: -2px;
  top: -2px;
}

.corner.upper-right {
  background: url("/static/upper-right.png") no-repeat center;
  background-size: 100%;
  top: -2px;
  right: -2px;
}

.corner.low-right {
  background: url("/static/low-right.png") no-repeat center;
  background-size: 100%;
  bottom: -2px;
  right: -2px;
}

.corner.left-lower {
  background: url("/static/left-lower.png") no-repeat center;
  background-size: 100%;
  bottom: -2px;
  left: -2px;
}
.statistics-content{
  width:calc(100% - 40px);
  margin: 0 auto;
  height: calc(100% - 97px);
  padding:15px;
  margin-top: 8px;
  .top-statistics-block{
    width: 100%;
    height: 110px;
    //background: $background;
    display: flex;
    flex-direction: column;
    .count-block{
      width: 100%;
      height: 100%;
      border: $border;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-shadow: $boxshadow;
      .count-item{
        width: calc((100% - 7px)/8);
        height: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: $border;
        .count{
          color: #FFEC76;
          font-size: 40px;
          font-weight: bold;
        }
        .text{
          font-size: 16px;
          color: #fff;
        }
      }
      .count-item:last-child{
        border: none;
      }
    }
  }
  .statistics-block{
    width: 100%;
    height:calc(100% - 130px);
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    .map-block{
      width:calc(50% - 40px);
      margin: 0 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .map-content{
        width: 100%;
        height: calc((100% - 40px)/3*2 + 20px);
        border: 1px solid #2b436f;
        background-image:url('/static/map.png');
        background-size: 100% 100%;
      }
      .chart-content{
        width: calc((100% - 20px)/2);
        position: relative;
        height: calc((100% - 40px)/3);
        border: $border;
        box-shadow:$boxshadow;
        margin-top: 20px;
        margin-right: 20px;
        .chart{
          width: 100%;
          height: 100%;
          padding: 10px;
        }
      }
      .chart-content:last-child{
        margin-right: 0;
      }
    }
    .chart-block{
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .chart-content{
        border: $border;
        width: 100%;
        position: relative;
        height: calc((100% - 40px)/3);
        box-shadow:$boxshadow;
        .chart{
          padding: 10px;
          width: 100%;
          height: 100%;
        }
      }
      .chart-content:nth-child(2){
        margin: 20px 0;
      }
    }
  }
}

</style>
